import React, {useState} from 'react';
import {Button, Card, Col, Divider, Form, message, Row, Select, Space, Spin, Upload} from "antd";
import {UploadOutlined} from "@ant-design/icons";
import TextArea from "antd/es/input/TextArea";
import {genChartByAiUsingPost} from "@/services/hjbi/chartController";
import ReactECharts from "echarts-for-react";


const AddChart: React.FC = () => {

  const [chart, setChart] = useState<API.BiResponse>()
  const [submitting, setSubmitting] = useState<boolean>(false)
  const [option, setOption] = useState<any>()

  /**
   * 提交values
   * @param values
   */
  const onFinish = async (values: any) => {
    // 避免重复提交
    if (submitting) {
      return;
    }
    setSubmitting(true)
    setChart(undefined)
    setOption(undefined)
    console.log('表单内容: ', values);
    console.log('file对象', values.file.file)
    const params = {
      ...values,
      file: undefined
    }
    try {
      const res = await genChartByAiUsingPost(params, {}, values.file.file.originFileObj)
      if (!res?.data) {
        message.error('分析失败')
      } else {
        message.success('分析成功')
        const chartOption = JSON.parse(res.data.genChart ?? '');
        if (!chartOption) {
          throw new Error('图表代码解析错误')
        } else {
          setChart(res.data)
          setOption(chartOption)
        }
      }
      console.log(res)
      message.success('分析成功')
    } catch (e: any) {
      message.error('分析失败:' + e.message)
    }

    setSubmitting(false)
  };

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title="智能分析 | Sync"> <Form
            name="addChart"
            onFinish={onFinish}
            initialValues={{}}
            labelCol={{span: 4}}
            wrapperCol={{span: 16}}
            labelAlign="left"
          >
            <Form.Item name="goal" label="分析目标" rules={[{required: true, message: '请输入分析目标'}]}>
              <TextArea placeholder="请输入你的分析诉求，如：分析网站用户增长量情况"/>
            </Form.Item>
            <Form.Item name="name" label="图标名称">
              <TextArea placeholder="请输入图标名称，如：网站信息表"/>
            </Form.Item>
            <Form.Item
              name="chartType"
              label="图表类型"
            >
              <Select placeholder="请选择输出的图表类型"
                      options={[
                        {value: '柱状图', label: '柱状图'},
                        {value: '折线图', label: '折线图'},
                        {value: '饼图', label: '饼图'},
                        {value: '散点图', label: '散点图'},
                        {value: '雷达图', label: '雷达图'},
                        {value: 'K线图', label: 'K线图'},
                        {value: '漏斗图', label: '漏斗图'},
                        {value: '关系图', label: '关系图'},
                        {value: '热力图', label: '热力图'},
                      ]}/>
            </Form.Item>

            <Form.Item
              name="file"
              label="原始数据"
            >
              <Upload name="file" maxCount={1}>
                <Button icon={<UploadOutlined/>}>上传 CSV 文件</Button>
              </Upload>
            </Form.Item>

            <Form.Item wrapperCol={{span: 12, offset: 4}}>
              <Space>
                <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                  智能分析
                </Button>
                <Button htmlType="reset">重置</Button>
              </Space>
            </Form.Item>
          </Form></Card>
        </Col>
        <Col span={12}>
          <Card title="分析结论">
            {chart?.genResult ?? <div>请先在左边进行提交</div>}
            <Spin spinning={submitting}/>
          </Card>
          <Divider/>
          <Card title="可视化图表">
            {
              option ? <ReactECharts option={option}/> : <div>请先在左边进行提交</div>
            }
            <Spin spinning={submitting}/>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default AddChart;
